import React, { CSSProperties } from 'react'
import { Search } from '@material-ui/icons'
import PubSub from 'pubsub-js'

const SearchStyle: CSSProperties = {
    height: '9vh',
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    display: 'flex',
    flexFlow: 'column nowrap',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 100,
    transition: 'all .3s'
}
const zeroHeight: CSSProperties = {
    boxShadow: '-2px 0px 24px 0px rgb(0 0 0 / 10%)',
    backgroundColor: '#fff'
}
const scorllStyle: CSSProperties = {
    backgroundColor: 'rgb(214,185,250)'
}
const search:CSSProperties = {
    height: '4.5vh',
    width: '90%',
    borderRadius: '1000px',
    backgroundColor: '#eee',
    display: 'flex',
    flexFlow: 'row nowrap',
    alignItems: 'center',
    paddingLeft: '4vw',fontSize: '12px',color: '#666666'
}
const SearchNav = () => {
    const [height,setHeight] = React.useState(0)
    React.useEffect(() => {
        PubSub.subscribe('pos',(_: string,data: any) => {
            setHeight(data.y)
        })
        return () => {

        }
    },[ ])// eslint-disable-line react-hooks/exhaustive-deps
    return (
        <div style={height !== 0 ? {...SearchStyle,...zeroHeight} : {...SearchStyle,...scorllStyle}}>
            <div style={search}>
                <Search fontSize='small'/>
                <div>
                    搜索...
                </div>
            </div>
        </div>
    )
}
export default SearchNav